<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<div id="app">
		<h3>所有注册用户</h3>
		<ul>
			<!-- 使用 v-for 遍历 list 数组，并为每个元素设置索引 key -->
			<li v-for="(item,index) in list" :key="index">
				{{item}}
			</li>
		</ul>
		<p>变异方法，改变原来的数组</p>
		<!-- 为每个按钮绑定点击事件，调用对应的方法 -->
		<button v-on:click="addpush">push</button>
		<button v-on:click="addpop">pop</button>
		<button v-on:click="addshift">shift</button>
		<button v-on:click="addunshift">unshift</button>
		<button v-on:click="addsplice">splice</button>
		<button v-on:click="addsort">sort</button>
		<button v-on:click="addreverse">reverse</button>
	</div>
	<script src="../js/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				list: [{
						message: "hello",
						username: "Jack"
					},
					{
						message: "hi",
						username: "Amily"
					}
				],
				items: [{
						id: 1
					},
					{
						id: 2
					},
					{
						id: 3
					},
					{
						id: 4
					}
				],
				rr: {
					lie: ""
				},
				num: [1, 3, 2, 8, 5, 9, 0]
			},
			methods: {
				addsplice() {
					// 打印原始的 list 数组
					console.log(this.list)
					// 使用 splice 方法在索引 1 处插入一个新元素
					//splice(start, deleteCount, item1, item2,...)
					//start： 指定修改的起始位置（ 索引）。
					//deleteCount： 要删除的元素数量。
					//item1, item2, ...：要添加到数组中的新元素。
					//splice() 方法会返回被删除的元素组成的数组， 如果没有删除元素则返回一个空数组。
					this.list.splice(1, 0, {
						message: "insert",
						username: "newuser"
					})
					//JSON.stringify将 JavaScript 对象或值转换为 JSON 格式的字符串。
					// 将修改后的 list 数组转换为 JSON 字符串并打印
					var jj = JSON.stringify(this.list)
					console.log(JSON.stringify(this.list))
					// 将 JSON 字符串解析回对象并打印
					console.log(JSON.parse(jj))
				},
				addpop() {
					// 使用 pop 方法删除 list 数组的最后一个元素
					this.list.pop();
					// 将修改后的 list 数组转换为 JSON 字符串并打印
					console.log(JSON.stringify(this.list))
				},
				addpush() {
					// 使用 push 方法在 list 数组末尾添加一个新元素
					this.list.push({
						message: "Good Morning",
						username: "Rose"
					});
					// 将修改后的 list 数组转换为 JSON 字符串并打印
					console.log(JSON.stringify(this.list))
				},
				addshift() {
					// 使用 shift 方法删除 list 数组的第一个元素
					this.list.shift();
					// 将修改后的 list 数组转换为 JSON 字符串并打印
					console.log(JSON.stringify(this.list))
				},
				addunshift() {
					// 使用 unshift 方法在 list 数组开头添加一个新元素
					this.list.unshift({
						message: "Good Morning",
						username: "Rose"
					});
					// 将修改后的 list 数组转换为 JSON 字符串并打印
					console.log(JSON.stringify(this.list))
				},
				addsort() {
					// 打印原始的 num 数组
					console.log(this.num)
					// 使用 sort 方法对 num 数组进行排序
					this.num.sort()
					// 打印排序后的 num 数组
					console.log(this.num)
				},
				addreverse() {
					// 打印原始的 list 数组
					console.log(JSON.stringify(this.list))
					// 使用 reverse 方法反转 list 数组
					this.list.reverse()
					// 打印反转后的 list 数组
					console.log(JSON.stringify(this.list))
				}
			}
		});
	</script>
</html>